<template>
  <div class="communityContainer">
    <div class="community">
      <div class="right">
        <div class="adds">
          <input type="text" v-model="typeEdit.typeName" class="add-in"
                 placeholder="分类名称">
          <select v-model="typeEdit.pid" class="add-se">
            <option value="0">请选择区域</option>
            <option value="1">分享区</option>
            <option value="2">问答区</option>
            <option value="3">招聘区</option>
          </select>
          <button class="add" @click="editType()" v-text="btnText"></button>
          <button class="delete" v-show="cencle" @click="cencles()">取消</button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button class="typeBtn"
                :class="$route.query.pid == null ? 'currentItem' : ''"
                @click="changeType(null)">
             全部分类
          </button>
          <button class="typeBtn"
                :class="$route.query.pid == 1 ? 'currentItem' : ''"
                @click="changeType(1)">
             分享区
          </button>
          <button class="typeBtn"
                :class="$route.query.pid == 2 ? 'currentItem' : ''"
                @click="changeType(2)">
              问答区
          </button>
          <button class="typeBtn"
                :class="$route.query.pid == 3 ? 'currentItem' : ''"
                @click="changeType(3)">
              招聘区
          </button>
        </div>
        <div class="inter" v-loading="isDataLoad">
          <div class="interItem"
               v-for="(item, index) in typeList"
               :key="index" :style="index%2===1?'background:#f5f7fa':''">
            <div class="ItemCenter">
              <div class="title">{{ item.typeName }}</div>
              <div class="publishDate">
                {{ item.createTime | handleTypesDateShow }}
              </div>
            </div>
            <div class="ItemCenter">
              <span v-if="item.pid==1">分享区</span>
              <span v-if="item.pid==2">问答区</span>
              <span v-if="item.pid==3">招聘区</span>
            </div>
            <button class="edit" @click="updateType(item.typeId,item.typeName,item.pid)">修改</button>
            <button class="delete" @click="deleteType(item.typeId)">删除</button>
          </div>
        </div>
        <div class="nullTips" v-if="typeList.length == 0 && isDataLoad == false">
          Types Not Found !
        </div>
<!--        <div class="adds">-->
<!--          <input type="text" v-model="typeEdit.typeName" class="add-in"-->
<!--                 placeholder="分类名称">-->
<!--          <select v-model="typeEdit.pid" class="add-se">-->
<!--            <option value="0">请选择区域</option>-->
<!--            <option value="1">分享区</option>-->
<!--            <option value="2">问答区</option>-->
<!--          </select>-->
<!--          <button class="add" @click="editType()" v-text="btnText"></button>-->
<!--          <button class="delete" v-show="cencle" @click="cencles()">取消</button>-->
<!--        </div>-->
        <div class="bottom" v-if="!isDataLoad && typeList.length !== 0">
          <!-- 分页组件 -->
          <el-pagination
              background
              layout="prev, pager, next"
              :total="totalCount"
              :current-page="this.$route.query.page * 1"
              @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 返回顶部组件 -->
    <go-top></go-top>
  </div>
</template>

<script>
let obj;
import {handleTypesDateShow} from "plugins/utils.js";
import GoTop from "components/goTop/GoTop.vue";


export default {
  name: "types",
  props: {
    // 滚动对象的选择器
    scrollObj: {
      type: String,
      default() {
        return "";
      },
    },
  },
  components: {
    GoTop,
  },
  data() {
    return {
      // 文章数据
      typeList: [],
      // 总条数
      totalCount: 0,
      // 是否正在加载数据
      isDataLoad: true,
      typeEdit: {
        typeId: "",
        typeName: "",
        pid: "0",
      },
      btnText: "新增",
      cencle: false,
    };
  },
  methods: {
    // 请求
    async getAllTypes() {
      this.isDataLoad = true;
      let res = await this.$request("/dqtype/superlist", {
        pageNum: this.$route.query.page,
        pageSize: 10,
      });
      console.log(res);
      if (res.data.code == 200) {
        this.totalCount = res.data.data.total;
        this.typeList = res.data.data.list;
        this.isDataLoad = false;
        // 返回顶部
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }
    },

    async editType() {
      if (this.typeEdit.typeName == "" || this.typeEdit.pid == "0") {
        this.$message.info("请完善分类信息!");
        return false;
      }
      if (this.typeEdit.typeId == "") {
        let res = await this.$request("/dqtype/add", {
          typeName: this.typeEdit.typeName,
          pid: this.typeEdit.pid,
        });
        //this.$message.info(res.data.msg);
        this.$message.success(res.data.msg);
      } else {
        let res = await this.$request("/dqtype/update", {
          typeName: this.typeEdit.typeName,
          pid: this.typeEdit.pid,
          typeId: this.typeEdit.typeId,
        });
        this.$message.success(res.data.msg);
      }
      this.cencles();
      if (this.$route.query.pid == null) {
        // 查询全部文章
        this.getAllTypes();
      } else {
        this.getAllTypesByPid(this.$route.query.pid);
      }
    },

    async deleteType(typeId) {
      this.$confirm("确认要删除此分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
            let res = await this.$request(
                `/dqtype/remove/`+typeId
            );
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              console.log(res.data.msg)
              location.reload();
            }
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      if (this.$route.query.pid == null) {
        // 查询全部文章
        this.getAllTypes();
      } else {
        this.getAllTypesByPid(this.$route.query.pid);
      }
    },
    updateType(typeId, typeName, pid) {
      this.typeEdit.typeId = typeId;
      this.typeEdit.typeName = typeName;
      this.typeEdit.pid = pid;
      this.btnText = "修改";
      this.cencle = true;
      this.el.scrollTo({
        behavior: "smooth",
        top: 0,
      });
    },
    cencles() {
      this.typeEdit.typeId = "";
      this.typeEdit.typeName = "";
      this.typeEdit.pid = "0";
      this.btnText = "新增";
      this.cencle = false;
    },

    // 切换分页的回调
    changePage(e) {
      // console.log(e);
      // this.currentPage = e;
      this.$router.push({
        name: "types",
        query: {page: e,pid:this.$route.query.pid},
      });
      this.getAllTypes();

    },
    changeType(pid) {
      if (this.$route.query.pid == pid) return;
      this.$router.push({name: "types", query: {pid: pid, page: 1}});
      if (pid == null || pid == '') {
        // 查询全部文章
        this.getAllTypes();
      } else {
        this.getAllTypesByPid(pid);
      }
    },
    async getAllTypesByPid(pid) {
      this.isDataLoad = true;
      let res = await this.$request(`/dqtype/superlist?pid=${pid}`, {
        pageNum: this.$route.query.page,
        pageSize: 10,
      });
      console.log(res);
      if (res.data.code == 200) {
        this.totalCount = res.data.data.total;
        this.typeList = res.data.data.list;
        this.isDataLoad = false;
        // 返回顶部
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }
    },
  },
  computed: {},
  filters: {
    handleTypesDateShow,
  },
  created() {
    this.getAllTypes();
  },
  mounted() {
    if (this.scrollObj == "") {
      obj = document;
      this.el = document.documentElement;
    } else {
      obj = document.querySelector(this.scrollObj);
      this.el = obj;
    }

    obj.onscroll = (e) => {
      // console.log(e);
      // console.log(obj.scrollTop);
      if (this.el.scrollTop >= 500 && this.isGoTopShow == false) {
        this.isGoTopShow = true;
        this.isFirstLoad ? (this.isFirstLoad = false) : "";
      } else if (this.el.scrollTop < 500 && this.isGoTopShow) {
        this.isGoTopShow = false;
      }
    };
  },
};
</script>

<style scoped>
.typeBtn{
  background: #8ea8e5;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid #aaa;
  color: white;
}
.currentItem{
  background: rgb(24, 54, 91);;
}
.adds {
  display: inline-flex;
  padding: 30px;
}

.add {
  background: #8ea8e5;
  color: white;
  border-radius: 7px;
  border: 1px solid #8ea8e5;
  width: 60px;
  height: 40px;
}

.add-in {
  margin-right: 20px;
  border-radius: 7px;
  border: 1px solid #8ea8e5;
  width: 240px;
}

.add-se {
  margin-right: 20px;
  border-radius: 7px;
  border: 1px solid #8ea8e5;
  width: 150px;
}

.edit {
  height: 40px;
  background: #8ea8e5;
  color: white;
  border-radius: 7px;
  border: 1px solid #8ea8e5;
  width: 60px;
}

.delete {
  margin-left: 20px;
  width: 60px;
  height: 40px;
  background: #8ea8e5;
  color: white;
  border-radius: 7px;
  border: 1px solid #8ea8e5;
}

.communityContainer {
  display: flex;
  justify-content: center;
  font-size: 15px;
}

.community {
  display: flex;
  max-width: 1200px;
  width: 85vw;
}


.right {
  padding: 10px 20px 20px;
  width: calc(100%);
}

.interItem {
  display: flex;
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 20px 20px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
}

.interItem:hover {
  background-color: #f2f6fb;
}

.userAvatar {
  width: 45px;
}

.userAvatar img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.ItemCenter {
  width: 460px;
  margin: 0 10px;
}

.ItemCenter div {
  margin-bottom: 1px;
  line-height: 18px;
}

.title {
  color: rgb(43, 43, 43);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publishDate {
  color: rgb(136, 136, 136);
  margin: 4px 0;
  font-size: 12px;
}

.content {
  color: rgb(136, 136, 136);
  font-size: 14px;
  line-height: 19px;
  /* 两行溢出 */
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.interImg img {
  border-radius: 5px;
}


.interImgItem /deep/ .el-image__inner {
  width: unset;
}

.bottom {
  width: 100%;
  text-align: center;
  margin: 40px 0;
}

.communityContainer /deep/ .el-loading-spinner {
  margin-top: 80px;
}

.nullTips {
  text-align: center;
  margin-top: 20vh;
  color: #666;
  letter-spacing: 1px;
}
</style>
